<script lang="ts" setup name="person">
// 安装路由npm i vue-router   默认则是安装最新版本的路由
//2设置路由出口  导入跳转方式
import { RouterView, RouterLink } from "vue-router";
</script>
<template>
  <div>
    <div>
      <!-- routerlink会自动添加激活类名，参数可选  注意传参方式& -->
      <!-- 贯穿性去看  从下载到导入，注册  使用   这个需要多看几个文件 -->
      <button>
        <RouterLink to="/home?a=哈哈&b=沙雕" active-class="textcoler"
          >首页（to的第一种写法）</RouterLink
        >
      </button>
      <!-- <button>
        params模式传参方式  需要提前在路由规则里面配置展位符，如果你使用对象势传参，不能用name,只能用path，且可以设置参数可设置参数可传可不传必要性
        <RouterLink to="/home/哈哈/沙雕" active-class="textcoler"
          >首页（to的第一种写法）</RouterLink
        >
      </button> -->
      <!-- <button>
        <RouterLink
          :to="{
            path: '/about',
            params: {
              a: '哈哈',
              b: '沙雕',
            },
          }"
          active-class="textcoler"
          >关于（to的第二种写法对象势）</RouterLink
        >
      <button> -->
      <button>
        <RouterLink
          :to="{
            path: '/about',
            query: {
              a: '哈哈',
              b: '沙雕',
            },
          }"
          active-class="textcoler"
          >关于（to的第二种写法对象势）</RouterLink
        >
      </button>
      <button>
        <RouterLink :to="{ name: 'logson' }" active-class="textcoler"
          >儿子（to的第三种写法对象势）</RouterLink
        >
      </button>
    </div>
    <div>
      <RouterView />
    </div>
  </div>
</template>
<style scoped>
.textcoler {
  color: red;
}
</style>
